import uCharts from '../ucharts/u-charts.js';
var _self;
var canvaColumn = null;
var canvaPie = null;
Page({
  data: {
    cWidth: '',
    cHeight: '',
    columnChartData: {
      "categories": ["单选题", "多选题", "判断题"],
      "series": [{
        "name": "答题情况",
        "data": [60,20,20]
      }]
    },
    pieChartData: {
      "series": [{
        "name": "正确率",
        "data": 80
        }, {
        "name": "错误率",
        "data": 20
      }]
    }
  },
  onLoad: function (options) {
    console.log(options);
    let id = options.id;
    this.onQuery(id);

  },
  onQuery: function(id) {
    let that = this;

    const db = wx.cloud.database()
    db.collection('historys').doc(id)
    .get().then(res => {
      // res.data 包含该记录的数据
      console.log('[数据库] [查询记录] 成功: ', res)
      let array = res.data.questions;
      let num1 = 0;
      let num2 = 0;
      let num3 = 0;
      let typecode = '';

      let rightnum = 0;
      let wrongnum = 0;
      array.forEach(element => {
        if(element.isRight){
          rightnum++;
        }
        typecode = parseInt(element['typecode']);
        
        switch(typecode){
          case 1:
            num1++;
            break;
          case 2:
            num2++;
            break;
          case 3:
            num3++;
            break;
        }
      });
      let columnChartData = this.data.columnChartData;
      let pieChartData = this.data.pieChartData;
      columnChartData.series[0]['data']= [num1,num2,num3];
      pieChartData.series[0]['data']= rightnum;
      pieChartData.series[1]['data']= 10-rightnum;

      this.setData({
        columnChartData,
        pieChartData
      },()=>{
        console.log(this.data);
        _self=this;
        this.cWidth = wx.getSystemInfoSync().windowWidth;
        this.cHeight = 500 / 750 * wx.getSystemInfoSync().windowWidth;
        _self.showColumn("canvasColumn", this.data.columnChartData);
    
        _self.showPie("canvasPie", this.data.pieChartData)
      })

    })
  },
  showColumn(canvasId, chartData) {
    canvaColumn = new uCharts({
      $this: _self,
      canvasId: canvasId,
      type: 'column',
      legend: true,
      fontSize: 11,
      background: '#FFFFFF',
      pixelRatio: 1,
      animation: true,
      categories: chartData.categories,
      series: chartData.series,
      xAxis: {
        disableGrid: true,
      },
      yAxis: {
        //disabled:true
      },
      dataLabel: true,
      width: _self.cWidth ,
      height: _self.cHeight ,
      extra: {
        column: {
          type: 'group',
          width: _self.cWidth * 0.45 / chartData.categories.length
        }
      }
    });

  },
  touchColumn(e) {
    canvaColumn.showToolTip(e, {
      format: function (item, category) {
        if (typeof item.data === 'object') {
          return category + ' ' + item.name + ':' + item.data.value
        } else {
          return category + ' ' + item.name + ':' + item.data
        }
      }
    });
  },
  showPie(canvasId,chartData){
    canvaPie=new uCharts({
      $this:_self,
      canvasId: canvasId,
      type: 'pie',
      fontSize:11,
      legend:{show:true},
      background:'#FFFFFF',
      series: chartData.series,
      animation: true,
      width: _self.cWidth ,
      height: _self.cHeight ,
      dataLabel: true,
      extra: {
        pie: {
          lableWidth:15
        }
      },
    });
  },
  touchLineA(e) {
    canvaLineA.scrollStart(e);
  },
  moveLineA(e) {
    canvaLineA.scroll(e);
  },
  touchEndLineA(e) {
    canvaLineA.scrollEnd(e);
    //下面是toolTip事件，如果滚动后不需要显示，可不填写
    canvaLineA.showToolTip(e, {
      format: function (item, category) {
        return category + ' ' + item.name + ':' + item.data
      }
    });
  },
  touchCandle(e) {
    canvaCandle.scrollStart(e);
  },
  moveCandle(e) {
    canvaCandle.scroll(e);
  },
  touchEndCandle(e) {
    canvaCandle.scrollEnd(e);
    //下面是toolTip事件，如果滚动后不需要显示，可不填写
    canvaCandle.showToolTip(e, {
      format: function (item, category) {
        return category + ' ' + item.name + ':' + item.data
      }
    });
  },
})
